<!--货物设置弹窗组件-->
<template>
	<div>
		<el-dialog class="cargo_setting" title="设备货物设置" width="800px"  :visible.sync="outerDialogVisible">
			<div class="wrapper">
				<div class="tit">控制盒序号：KZ0001</div>
				<div class="operation">
					<el-button @click="selectCom">选择货物</el-button>
					<el-button :disabled="Selections.length <= 1" @click="takeEffect()">批量生效</el-button>
					<el-button :disabled="Selections.length <= 1" @click="loseEfficacy()">批量失效</el-button>
					<el-button :disabled="Selections.length <= 1" @click="del()">批量删除</el-button>
				</div>
				<el-table :data="tableData" size="mini" style="width: 100%" row-key="id" border @selection-change="handlerSelection"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :indent="0">
					<el-table-column type="selection" width="30">
					</el-table-column>
					<el-table-column prop="order" label="序号" width="60">
					</el-table-column>
					<el-table-column prop="name" label="货物目录" width="100">
					</el-table-column>
					<el-table-column label="状态" width="80">
						<template slot-scope="scope">
                            <div class="state state_normal" v-if="scope.row.state==-1">未生效</div>
							<div class="state state_normal" v-if="scope.row.state==1">已生效</div>
							<div class="state state_disabled" v-else-if="scope.row.state==0">已失效</div>
							<div class="state state_error" v-else></div>
						</template>
					</el-table-column>
					<el-table-column prop="updateBy.loginName" label="上次操作人" width="100">
					</el-table-column>
					<el-table-column prop="updateDate" label="上次操作时间" width="100">
					</el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-button @click="del(scope.row.equipProductId)"  type="text" size="mini">删除</el-button>
							<el-button @click="takeEffect(scope.row.equipProductId)" type="text" size="mini">生效</el-button>
							<el-button @click="loseEfficacy(scope.row.equipProductId)" type="text" size="mini">失效</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
        <com-setting ref="comSetting" ></com-setting>
	</div>
</template>

<script>
import {getTreeData} from '@/api/market/product.js'
import comSetting from '@/views/modules/equipment/comSetting'
export default {
    components: {
        comSetting
    },
    data () {
        return {
            outerDialogVisible: false,
            menuCheckedKeys: [],
            tableData: [],
            loading: false,
            Selections: [],
            menuList: [],
            inputForm: {
                endEquipId: '',
                endEquipCode: '',
                edgeEquipCode: ''
            }
        }
    },
    mounted () {
    },
    methods: {
        handlerSelection (e) {
            this.Selections = e
            console.log(e)
        },
        init (row, innerCode) {
            this.outerDialogVisible = true
            // 通讯盒内部编号接收  赋值
            this.inputForm.edgeEquipCode = innerCode
            // 接收控制盒数据并且赋值
            this.inputForm.endEquipId = row.id // 控制盒ID
            this.inputForm.endEquipCode = row.innerCode // 控制盒内部编号
            this.getTreeData1()
        },
        selectCom () {
            this.$refs.comSetting.init(this.inputForm)
        },
        getTreeData1 () {
            console.log(1)
            this.$http({
                url: `/equip/equipJoinProduct/treeData?equipId=` + this.inputForm.endEquipId,
                method: 'get'
            }).then((res) => {
                if (res.data.code === '200') {
                    this.tableData = res.data.result
                    console.log(this.tableData)
                }
            })
        },
        // 删除
        del (id) {
            let ids = id || this.Selections.map(item => {
                return item.equipProductId
            }).join(',')
            console.log(ids)
            this.$confirm(`确定删除所选项吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: '/equip/equipProduct/delete',
                    method: 'post',
                    params: {'ids': ids}
                }).then(({data}) => {
                    if (data && data.success) {
                        this.$message.success(data.msg)
                        this.getTreeData1()
                    }
                })
            })
        },
        // 生效
        takeEffect (id) {
            let ids = id || this.Selections.map(item => {
                return item.equipProductId
            }).join(',')
            console.log(ids)
            this.$confirm(`确定生效所选项吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: '/equip/equipProduct/updateStatus',
                    method: 'post',
                    params: {'ids': ids, state: 1}
                }).then(({data}) => {
                    if (data.code === '200') {
                        this.$message.success(data.msg)
                        this.getTreeData1()
                    }
                })
            })
        },
        // 失效
        loseEfficacy (id) {
            let ids = id || this.Selections.map(item => {
                return item.equipProductId
            }).join(',')
            console.log(ids)
            this.$confirm(`确定失效所选项吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: '/equip/equipProduct/updateStatus',
                    method: 'post',
                    params: {'ids': ids, state: 0}
                }).then(({data}) => {
                    if (data && data.success) {
                        this.$message.success(data.msg)
                        this.getTreeData1()
                    }
                })
            })
        },
        getTreeData (id) {
            getTreeData({id: id}).then((res) => {
                if (res.data.code === '200') {
                    this.menuList = res.data.result
                }
            })
        }
    }
}
</script>
<style lang="scss">
.cargo_setting{
	.el-table__row--level-1{
		td:nth-child(3){
			text-indent: 20px;
		}
	}
}
</style>
<style lang="scss" scoped>
.wrapper {
	padding-bottom: 30px;
	margin: -20px -30px 0;
	.operation{
		margin:20px 0
	}
	.el-button{
		padding: 0 20px;
	}
}
</style>
